// 2.引入常态化样式表
require("../../assets/css/normalize.css");
// 1.引入重置样式表
require("../../assets/css/reset.css");
// 3.引入公共样式
require("../../assets/css/common.css");
//3.1引入字体图标样式
require("../../assets/fonts/iconfont.css");
// 4.引入当前页样式
require("../../assets/css/tabbar.less");
require("./index.less");

//引入swiper
require("../../libs/swiper/swiper-bundle.css");
const Swiper = require("../../libs/swiper/swiper-bundle.js");

//引入js模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");

document.addEventListener("DOMContentLoaded", function () {
	//渲染tabbar
	dom.tabbar("index");

	// 初始化swiper
	let mySwiper = new Swiper(".swiper", {
		loop: true, // 循环模式选项
		// 自动播放
		autoplay: {
			delay: 1000,
			stopOnLastSlide: false,
			disableOnInteraction: false, //就算点击之后也要自动播放
		},

		// 如果需要分页器
		pagination: {
			el: ".swiper-pagination",
		},
	});

	//发请求获取用户个人信息
	axios.get("/api/user/info").then((res) => {
		let data = res.data.data;
		// 渲染排名
		dom.get("#rankNum").textContent = data.ranking;
		//渲染徽章
		dom.get("#badgeNum").textContent = data.badges;
	});

	//发请求获取打卡信息
	function renderClock() {
		axios.get("/api/user/clockInInfo").then((res) => {
			//渲染累计打卡天数
			dom.get("#clockinNum").textContent = res.data.data.clockCount;

			let btn = dom.get("#clockinBtn");
			if (res.data.data.isClockIn) {
				//已打卡
				btn.disabled = true; //禁用
				btn.style.backgroundColor = "#999";
				btn.textContent = "已打卡";
			}
		});
	}
	renderClock();
	// 绑定打卡点击事件
	dom.get("#clockinBtn").addEventListener("click", function () {
		//发请求打卡
		axios.post("/api/user/clockIn").then((res) => {
			console.log(res);
			if (res.data.errno === 0) {
				alert("打卡成功,明天再来哦");
				renderClock();
			}
		});
	});
});
